<!-- 赛事已结束页面 -->
<template>
	<view class="item-block">
		<scroll-view ref="myScrollView" @scrolltolower='scrolltolower' scroll-y
			:style="{ height: `calc(100vh - 20px)` }">
			<view class="header_item">
				<view class="header_left">
					<view class="state_item">
						已结束 <span>●</span>
					</view>
					<view class="title_top">
						<view class="title_item">
							{{form.raceName}}
						</view>
						<view class="team_item">
							开始时间:{{form.startTime}}
						</view>
						<view class="team_item">
							结束时间:{{form.endTime}}
						</view>
					</view>
					<view class="address_item">
						<span class="iconfont icon-dizhi"></span>
						<span class="address_text">{{form.placeName}}</span>
					</view>
				</view>

			</view>
			<view class="ranking">
				<view class="title">
					比赛排行
				</view>
				<view class="ranking_table">
					<view class="table_left">
						<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="70" align="center">HOLE</uni-th>
							</uni-tr>
							<uni-tr>
								<uni-th width="70" align="center">PAR</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in datalist" :key="index" @click.native="tableitem(item)">
								<uni-td>{{ item.teamName }}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
					<view class="table_right">
						<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="65" align="center">1</uni-th>
								<uni-th width="65" align="center">2</uni-th>
								<uni-th width="65" align="center">3</uni-th>
								<uni-th width="65" align="center">4</uni-th>
								<uni-th width="65" align="center">5</uni-th>
								<uni-th width="65" align="center">6</uni-th>
								<uni-th width="65" align="center">7</uni-th>
								<uni-th width="65" align="center">8</uni-th>
								<uni-th width="65" align="center">9</uni-th>
								<uni-th width="65" align="center">10</uni-th>
								<uni-th width="65" align="center">11</uni-th>
								<uni-th width="65" align="center">12</uni-th>
								<uni-th width="65" align="center">13</uni-th>
								<uni-th width="65" align="center">14</uni-th>
								<uni-th width="65" align="center">15</uni-th>
								<uni-th width="65" align="center">16</uni-th>
								<uni-th width="65" align="center">17</uni-th>
								<uni-th width="65" align="center">18</uni-th>
								<uni-th width="65" align="center">总差</uni-th>
								<uni-th width="65" align="center">总杆</uni-th>
							</uni-tr>
							<uni-tr>
								<uni-th width="65" align="center">{{parobj.strOne}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strTwo}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strThree}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strFour}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strFive}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strSix}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strSeven}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strEight}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strNine}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strTen}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strEleven}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strTwelve}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strThirteen}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strFourteen}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strFifteen}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strSixteen}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strSeventeen}}</uni-th>
								<uni-th width="65" align="center">{{parobj.strEighteen}}</uni-th>
								<uni-th width="65" align="center">-</uni-th>
								<uni-th width="65" align="center">{{pole==null?"-":pole}}</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in datalist" :key="index" @click.native="tableitem(item)">
								<uni-td>{{ item.strOne ==null?'':item.strOne}}</uni-td>
								<uni-td>{{ item.strTwo ==null?'':item.strTwo}}</uni-td>
								<uni-td>{{ item.strThree ==null?'':item.strThree}}</uni-td>
								<uni-td>{{ item.strFour ==null?'':item.strFour}}</uni-td>
								<uni-td>{{ item.strFive ==null?'':item.strFive}}</uni-td>
								<uni-td>{{ item.strSix ==null?'':item.strSix}}</uni-td>
								<uni-td>{{ item.strSeven ==null?'':item.strSeven}}</uni-td>
								<uni-td>{{ item.strEight ==null?'':item.strEight}}</uni-td>
								<uni-td>{{ item.strNine ==null?'':item.strNine}}</uni-td>
								<uni-td>{{ item.strTen==null?'':item.strTen }}</uni-td>
								<uni-td>{{ item.strEleven==null?'':item.strEleven }}</uni-td>
								<uni-td>{{ item.strTwelve ==null?'':item.strTwelve}}</uni-td>
								<uni-td>{{ item.strThirteen==null?'':item.strThirteen }}</uni-td>
								<uni-td>{{ item.strFourteen==null?'':item.strFourteen }}</uni-td>
								<uni-td>{{ item.strFifteen==null?'':item.strFifteen }}</uni-td>
								<uni-td>{{ item.strSixteen ==null?'':item.strSixteen}}</uni-td>
								<uni-td>{{ item.strSeventeen ==null?'':item.strSeventeen}}</uni-td>
								<uni-td>{{ item.strEighteen ==null?'':item.strEighteen}}</uni-td>
								<uni-td>{{ item.total ==null?'':item.total}}</uni-td>
								<uni-td>{{ item.differtotal ==null?'':item.differtotal}}</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
			</view>
			<view class="contribute">
				<view class="title">
					贡献排行
				</view>
				<view class="table_item">
					<uni-table ref="table" :loading="loading" emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width="56" align="center">排名</uni-th>
							<uni-th width="56" align="center">队员</uni-th>
							<uni-th width="56" align="center">贡献分数</uni-th>

						</uni-tr>
						<uni-tr v-for="(item, index) in ranklist" :key="index">
							<uni-td>{{ index+1 }}</uni-td>
							<uni-td>
								<view class=""
									style="display: flex; align-items: center; justify-content: center; height: 100%;">
									<view class="">
										{{ item.nickName }}
									</view>
								</view>
							</uni-td>
							<uni-td>{{ item.totalContribute }}</uni-td>
						</uni-tr>
					</uni-table>
				</view>

			</view>
			<view class="botlist" v-if="imglist.length>0">
				<view class="polular_title">
					<view class="title_left">
						赛事集锦
					</view>

				</view>
				<view class="img_item_list">
					<view class="img_item " v-for="(item,index) in imglist" :key="index">
						<view class="preview-img" v-if="item.eventType==1">
							<image style="width: 100%; height: 100%; background-color: #eeeeee;" :mode="item.mode"
								:src="item.eventUrl" @click="lookimg(item.eventUrl)"></image>
						</view>
						<view class="preview-video" v-else>
							<video :id="'myVideo' + index" :src="item.eventUrl" object-fit='contain'
								:show-fullscreen-btn="true" :autoplay="false" :title='item.eventDesc'
								@fullscreenchange='screenchange($event,index)' @play='lookvideo(index)'
								:show-center-play-btn='false'></video>
						</view>
						<view class="title">
							{{
							item.eventDesc
						}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				parobj: {},
				datalist: [], //队伍排行
				ranklist: [], //贡献排行
				id: '',
				query: {
					raceId: '',
					pageNum: 1,
					pageSize: 10
				},
				imglist: [] //赛事集锦列表
			}
		},
		created() {

		},
		onLoad(options) {
			// 从路由参数中获取传递的值
			this.id = decodeURIComponent(options.id);
			this.query.raceId = decodeURIComponent(options.id);
			this.formdetail()
			this.collection()
		},
		mounted() {



		},
		computed: {
			// 计算属性 fullName 会基于 firstName 和 lastName 进行缓存
			pole: function() {
				return this.parobj.strOne + this.parobj.strTwo + this.parobj.strThree + this.parobj.strFour + this
					.parobj.strFive + this.parobj.strSix + this.parobj.strSeven + this.parobj.strEight + this.parobj
					.strNine + this.parobj.strTen + this.parobj.strEleven + this.parobj.strTwelve + this.parobj
					.strThirteen + this.parobj.strFourteen + this.parobj.strFifteen + this.parobj.strSixteen + this
					.parobj.strSeventeen + this.parobj.strEighteen
			},
			difference: function() {
				return this.datalist.reduce((sum, item) => sum + item.differtotal, 0);
			}
		},
		methods: {
			// video的@fullscreenchange事件
			screenchange(e, index) {
				if (!e.detail.fullScreen) {
					const videotext = uni.createVideoContext('myVideo' + index)
					videotext.pause()
				}
			},
			// video的@play事件
			lookvideo(e) {
				const videotext = uni.createVideoContext('myVideo' + e)
				videotext.requestFullScreen()
			},
			//查看图片 
			lookimg(e) {
				uni.previewImage({
					urls: [e]
				})
			},
			//表单详情
			formdetail() {
				const that = this
				// 顶部赛事信息
				this.$request(`/race/runDetail/${this.id}`, 'get')
					.then(
						res => {
							that.form = res.data.data
						})
				//par标准杆
				this.$request(`/race/barSetting/${this.id}`, 'get')
					.then(
						res => {
							that.parobj = res.data.data
							//队伍所得分数
							that.$request(`/race/teamRank/${that.id}`, 'get')
								.then(
									res => {
										that.datalist = res.data.data
										that.datalist.forEach(item => {
											let total = 0;
							
											// 你可以手动列出这些属性
											let lhProperties = [
												"strOne", "strTwo", 'strThree', 'strFour', 'strFive', 'strSix', 'strSeven',
												'strEight', 'strNine', 'strTen',
												'strEleven', 'strTwelve', 'strThirteen', 'strFourteen', 'strFifteen',
												'strSixteen', 'strSeventeen', 'strEighteen'
											];
							
											// 计算 total
											lhProperties.forEach(prop => {
												total += item[prop]; // 将每个属性的值累加到 total
											});
											// 将 total 添加到当前对象中
											item.total = total;
											item.differtotal = total + that.pole
										});
									})
						})
				
				//贡献排行
				this.$request(`/race/contributeRank/${this.id}`, 'get')
					.then(
						res => {
							that.ranklist = res.data.data
						})

			},
			//赛事集锦分页
			scrolltolower() {
				this.query.pageNum++
				this.collection()
			},
			//赛事集锦列表
			collection() {
				this.$request(`/race/events`, 'post', this.query)
					.then(
						res => {
							this.imglist = this.imglist.concat(res.data.data.records)
						})
			},
			//队伍中每个人的贡献值
			tableitem(e) {
				const data = {
					rid: this.id,
					tid: e.teamId,
					name: e.teamName,
					state: 2
				}
				const objStr = JSON.stringify(data);
				uni.navigateTo({
					url: '/subpackage1/eventpage/team_ranking?id=' + encodeURIComponent(objStr)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	// .preview-full {
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	bottom: 0;
	// 	width: 100%;
	// 	height: 100%;
	// 	z-index: 1002;
	// }
	// .preview-full video {
	// 	width: 100%;
	// 	height: 100%;
	// 	z-index: 1002;
	// }

	.item-block {
		height: calc(100vh - 20px);
		background-color: #f4f4f4;
		padding: 10px 0;
		overflow: auto;

		// ::v-deep .table--border {
		// 	border: 0px !important;
		// }

		.header_item {
			height: 140px;
			display: flex;



			.state_item {
				background-color: #fff;
				position: absolute;
				font-size: 10px;
				right: 7px;
				top: 7px;
				padding: 2px 5px;
				border: 1px solid #de3600;
				border-radius: 10px;

				span {
					font-weight: 600;
					color: #de3600;
				}
			}

			.header_left {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin: 0 10px;
				padding: 12px;
				border-radius: 15px;
				width: calc(100% - 44px);
				background-color: #fff;
				position: relative;
				background-image: url('https://web.ptgolf.net/image/webchat/12.png');
				background-size: 100% 100%;

				.title_top {
					.title_item {
						font-size: 18px;
						font-weight: 800;
					}

					.team_item {
						margin-top: 5px;
						font-size: 12px;
						color: #afafaf;
					}
				}

				.address_item {
					margin-top: 10px;

					.icon-dizhi {
						font-size: 13px;
						border-radius: 10px;
						padding: 2px;
						background-color: #de3600;
						color: #fff;
						margin-right: 3px;
					}

					.address_text {
						font-size: 12px;
						color: #afafaf;
					}
				}
			}


		}

		.ranking {
			margin-top: 20px;
			max-height: calc(70% - 192px);

			.title {
				font-size: 17px;
				font-weight: 600;
				padding-bottom: 5px;
				padding-left: 20px;

			}

			.ranking_table {
				display: flex;
				overflow-y: auto;
				max-height: calc(100% - 27px);
				overflow-x: hidden;

				::v-deep .uni-table-th {
					font-size: 13px;
					color: #de3600;
					font-weight: 600;
				}


				.table_left {
					width: 35%;
					box-shadow: 5px 0px 5px #f4f4f4;
					/* 右侧阴影，垂直偏移量为0 */
					z-index: 3;

					::v-deep .uni-table-td {
						line-height: 25px !important;
						white-space: nowrap;
						/* 防止文字换行 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						text-align: center !important;
					}

					::v-deep .uni-table {
						min-width: 0 !important;
					}
				}

				.table_right {
					width: 65%;

					::v-deep .uni-table-td {
						text-align: center !important;
						line-height: 25px !important;
					}
				}

				::v-deep .uni-table-td {
					height: 30px !important;

				}

			}
		}

		.contribute {
			margin-top: 10px;
			border-radius: 20px 20px 0 0;
			background-color: #fff;
			padding: 15px;
			height: calc(30% + 20px);

			.table_item {
				height: calc(100% - 32px);
				overflow-y: auto;
			}

			.title {
				margin-bottom: 10px;
				font-size: 17px;
				font-weight: 600;
			}

			::v-deep .uni-table-th {
				border: 0 !important;
				font-size: 13px;
				color: #de3600;
				font-weight: 600;
			}

			::v-deep .uni-table .uni-table-tr {
				height: 40px;
			}

			::v-deep .uni-table .uni-table-tr:nth-child(2n) {
				background-color: #f4f4f4 !important;

				:nth-child(1) {
					border-radius: 8px 0 0 8px !important;
				}

				:nth-child(3) {
					border-radius: 0 8px 8px 0 !important;
				}
			}

			::v-deep .uni-table-td {
				border: 0 !important;
				line-height: 30px;
				text-align: center !important;
			}
		}

		.botlist {
			padding: 0 20px;

			.polular_title {
				font-weight: 600;
				margin: 10px 0px;

			}

			.one_class {
				padding: 5px 10px;

				.title_name {
					font-size: 14px;
				}



			}

			.img_item_list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				width: 100%;

				.img_item {
					background-color: #fff;
					border-radius: 10px;
					width: 46%;

					.preview-img {
						padding: 8px;
						height: 100px;
						width: calc(100% - 20px);
					}

					.preview-video {
						padding: 8px;
						height: 100px;
						width: calc(100% - 20px);

						video {
							height: 100%;
							width: 100%;
						}
					}

					.title {
						font-size: 14px;
						width: calc(100% - 20px);
						white-space: nowrap;
						/* 防止文字换行 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						padding: 0 10px 10px 10px;
					}
				}
			}
		}
	}
</style>